<template>
  <div class="flex flex-wrap gap-2 mb-4">
    <button 
      :class="{ 'bg-blue-600 text-white': filter === 'all', 'bg-gray-200 text-gray-800': filter !== 'all' }"
      @click="handleFilter('all')"
      class="px-4 py-2 rounded-lg transition-all hover:shadow-md"
    >
      全部
    </button>
    <button 
      :class="{ 'bg-blue-600 text-white': filter === 'active', 'bg-gray-200 text-gray-800': filter !== 'active' }"
      @click="handleFilter('active')"
      class="px-4 py-2 rounded-lg transition-all hover:shadow-md"
    >
      未完成
    </button>
    <button 
      :class="{ 'bg-blue-600 text-white': filter === 'completed', 'bg-gray-200 text-gray-800': filter !== 'completed' }"
      @click="handleFilter('completed')"
      class="px-4 py-2 rounded-lg transition-all hover:shadow-md"
    >
      已完成
    </button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{
  filter: string
}>()

const emits = defineEmits<{
  (e: 'filter-todos', filter: string): void
}>()

const handleFilter = (filter: string) => {
  emits('filter-todos', filter)
}
</script>
  